<template>
	<view :class="showAnswer ? 'answer-test' : 'question-test'" class="test">
		<uni-nav-bar @clickLeft="clickLeft" leftIcon="back" fixed="true" statusBar :border="false" title="考试"></uni-nav-bar>
		<image v-if="!showAnswer" class="test-bg" mode="widthFix" src="https://image.39.net/quickapp/home/v1.9.0/test-1-1.png"></image>
		<image v-if="showAnswer" class="test-bg" mode="widthFix" src="https://image.39.net/quickapp/home/v1.9.0/test-2-1.png"></image>

		<view class="progress">
			<view class="number">
				<text style="color: rgb(50,145,249)">{{ stack.length }}</text>
				<text style="margin: 0 10upx;">/</text>
				<text style="color: rgb(102,120,156)">{{ detail.stuSubjectVos.length || '0' }}</text>
			</view>
			<progress border-radius="5" backgroundColor="rgba(0, 61, 154, 0.05)" activeColor="#3291F9" class="progress-bar" type="horizontal" :percent="percent"></progress>
		</view>
		<view class="body">
			<view class="bg-content" v-if="!showAnswer">
				<view class="one" v-if="!showAnswer"></view>
				<view class="two" v-if="!showAnswer"></view>
				<text class="title">{{ question.title }}1</text>
				<block :key="index" v-for="(item, index) in question.stuSubjectSelects">
					<text class="item" @click="next(item)">{{ item.selectValue }}.{{ item.selectName }}</text>
				</block>
				<view style="height: 60upx"></view>
			</view>
			<view class="content" v-if="!showAnswer">
				<text class="title">{{ question.title }}</text>
				<block v-for="(item, index) in question.stuSubjectSelects" :key="index">
					<text class="item" @click="next(item, question.subjectId)">{{ item.selectValue }}.{{ item.selectName }}</text>
				</block>
			</view>
			<view style="flex-direction: column" v-else>
				<view class="answer-wrap">
					<image class="bg" src="https://image.39.net/quickapp/home/v1.9.0/test-list.png"></image>
					<view class="answer-content">
						<text class="answer">您的得分为{{ result.hasPoint }}</text>
						<text class="desc">总共答对{{ result.rightSubject }}题</text>
						<view v-if="result.rightSubject < detail.stuSubjectVos.length" class="btn" @click="loadQuestion(0)"><text>我要重做</text></view>
						<view v-else class="btn" @click="clickLeft"><text>恭喜满分</text></view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!showAnswer" class="before" @click="goBack">
			<text class="blue" v-if="stack.length > 1">上一题</text>
			<text v-else>上一题</text>
		</view>
		<view v-if="timeout" class="timer">已作答{{ timeout | formatSeconds }}</view>
		<view v-if="!showAnswer" class="submit" @click="handleSubmit"><text class="blue" v-if="stack.length">提前交卷</text></view>
	</view>
</template>

<script>
// import ModuleTitle from '@/components/ModuleTitle.vue';
// import { getQuestion, getResult, getList } from '@/service/test.js';
import Item from '../components/Item.vue';
import { getTestById, correctingTestPapers } from '@/services/test.js';
export default {
	components: { Item },
	data() {
		return {
			placeholder: '测一测',
			loading: false,
			// 问题
			question: {},
			// 当前测试题
			currentTest: {},
			// 积分
			score: 0,
			// 数量
			squence: '',
			// 结果
			answer: {},
			// 显示结果
			showAnswer: false,
			relativeList: [],
			// 问题的栈
			stack: [],
			qCount: 0,
			detail: {},
			answerList: [],
			timeout: 0,
			result: {}
		};
	},
	computed: {
		percent() {
			return this.detail.stuSubjectVos ? Math.floor((this.stack.length / this.detail.stuSubjectVos.length) * 100) : 0;
		}
	},
	filters: {
		/**
		 * 过滤选项的✔字符
		 */
		filterA(text) {
			return text.replace(/&radic[;；]?/g, '');
		}
	},
	onLoad({ id, fid }) {
		this.id = id;
		this.loadQuestion();
	},
	onUnload() {
		clearInterval(this.timer);
	},
	methods: {
		clickLeft() {
			if (!this.showAnswer) {
				uni.showModal({
					content: '是否提前交卷',
					success: async ({ confirm }) => {
						if (confirm) {
							try {
								await this.handleSubmit();
							} catch (e) {
								//TODO handle the exception
							} finally {
								uni.navigateBack({});
							}
						}
					}
				});
			} else {
				uni.navigateBack({});
			}
		},
		async handleSubmit() {
			if (!this.answerList.length)
				return uni.showToast({
					title: '答案不能为空',
					icon: 'none'
				});
			uni.showLoading();
			clearInterval(this.timer);
			this.timeout = 0;
			const stuAnswerVos = this.answerList.map(v => ({ answer: v.selectValue, subjectId: v.subjectId }));
			// if (stuAnswerVos.length < this.stuSubjectVos.length) {
			// }
			try {
				const result = await correctingTestPapers({
					testId: this.detail.testId,
					time: this.timer,
					stuAnswerVos
				});
				this.result = result;
				this.loadResult();
			} catch (e) {
				//TODO handle the exception
			} finally {
				uni.hideLoading();
			}
		},
		/**
		 * 加载问题
		 */
		async loadQuestion(qid) {
			if (this.loading) {
				return;
			}
			this.loading = true;
			if (qid == 0) {
				this.score = 0;
				this.squence = '';
				this.answerList = [];
				this.showAnswer = false;
				this.stack = [];
				this.timer = null;
				this.timeout = 0;
			}
			try {
				if (!this.detail.testId) {
					const resp = await getTestById({
						testId: this.id
					});
					this.detail = resp;
				}

				this.question = this.detail.stuSubjectVos[0];
				this.stack.push(this.question);
				// this.currentTest = resp.data.Examination;
				// this.placeholder = this.currentTest.Title;

				this.timer = setInterval(() => {
					this.timeout += 1;
					if (this.timeout > this.detail.testTime * 60) {
						// 提交试卷
						clearInterval(this.timer);
						this.handleSubmit();
					}
				}, 1000);
			} catch (e) {
				//TODO handle the exception
			} finally {
				this.loading = false;
			}
		},

		/**
		 * 加载测试结果
		 */
		async loadResult() {
			this.showAnswer = true;
			// this.getRelative();
			// try {
			// 	const resp = await getResult({
			// 		url,
			// 		params
			// 	});
			// 	this.showResult = true;
			// 	if (!resp || !resp.data) {
			// 		this.answer = { AnswerValue: '暂无结果' };
			// 		this.showAnswer = true;
			// 		return;
			// 	}
			// 	let l = resp.data;
			// 	if (!l.AnswerValue) {
			// 		l.AnswerValue = '暂无结果';
			// 	} else {
			// 		var pattern = /(<\/?(.*?)>)|(&nbsp;)|\s|<br\/?>/g;
			// 		l.AnswerValue = l.AnswerValue.replace(pattern, '').replace(/(快扫码关注(.*?)公众号，(.*?)查看详细结果和健康指南吧↓↓↓)/g, '');
			// 	}
			// 	this.answer = l;
			// 	this.showAnswer = true;
			// } catch (e) {
			// 	//TODO handle the exception
			// } finally {
			// 	this.loading = false;
			// }
		},
		/**
		 * 加载下一题
		 */
		next(option, subjectId) {
			option.subjectId = subjectId;
			if (this.stack.length < this.detail.stuSubjectVos.length) {
				this.stack.push(this.detail.stuSubjectVos[this.stack.length]);
				this.question = this.stack[this.stack.length - 1];
			}
			if (this.answerList.length < this.stack.length) {
				this.answerList.push(option);
			}
			if (this.answerList.length === this.detail.stuSubjectVos.length) {
				this.handleSubmit();
			}
		},
		/**
		 * 返回上一题
		 */
		goBack() {
			if (this.stack.length > 1) {
				this.stack.pop();
				this.question = this.stack[this.stack.length - 1];
			}
		},
		async getRelative() {
			if (this.fid) {
				const resp = await getList({
					fid: this.fid,
					eid: this.currentTest.ExaminationId,
					pageIndex: 1,
					pageSize: 5,
					orderby: 'viewcount'
				});
				this.relativeList = resp.data;
			}
		},
		routerToRelative() {
			uni.navigateTo({
				url: '/pages/index/test/index'
			});
		}
	}
};
</script>

<style lang="less" scoped>
view {
	display: flex;
}
.answer-test {
	background-color: rgb(247, 249, 252);
}
.question-test {
	background-color: rgb(219, 232, 247);
}
.test {
	height: 100vh;
	// overflow: hidden;
	position: relative;
	.test-bg {
		position: absolute;
		width: 750upx;
	}
	.before {
		z-index: 1000;
		color: rgb(195, 213, 236);
		position: absolute;
		left: 60upx;
		bottom: 50upx;
		font-size: 28upx;
	}
	.submit {
		z-index: 1000;
		color: rgb(195, 213, 236);
		position: absolute;
		right: 60upx;
		bottom: 50upx;
		font-size: 28upx;
	}
	.timer {
		z-index: 1000;
		color: rgb(50, 145, 249);
		position: absolute;
		left: 320upx;
		bottom: 50upx;
		font-size: 28upx;
	}
	.progress {
		position: absolute;
		top: 310upx;
		left: 60upx;
		width: 420upx;
		flex-direction: column;
		.number {
			width: 100%;
			justify-content: flex-end;
			text {
				font-size: 28upx;
			}
		}
		.progress-bar {
			stroke-width: 10upx;
			layer-color: rgba(0, 61, 154, 0.05);
		}
	}
	.body {
		// position: relative;
		position: absolute;
		z-index: 10;
		width: 750upx;
		flex-direction: column;
		align-items: center;
		padding-top: 300upx;
		.opacity-panel {
			background-color: rgba(255, 255, 255, 0.667);
			border-radius: 10upx;
			color: #fff;
		}
		.content {
			position: absolute !important;
			// top: 0;
		}
		.bg-content,
		.content {
			position: relative;
			flex-direction: column;
			width: 690upx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 10upx;
			padding: 60upx 0;
			margin-top: 80upx;
			.title {
				font-weight: bold;
				font-size: 40upx;
				color: rgb(50, 52, 55);
				// width: 100%;
				text-align: center;
				line-height: 60upx;
				padding: 0 30upx;
			}
			.item {
				font-size: 36upx;
				color: rgb(50, 145, 249);
				text-align: center;
				width: 570upx;
				margin: 30upx 60upx 0;
				background-color: rgb(235, 246, 255);
				border-radius: 45upx;
				padding: 20upx 0;
				&:active {
					background-color: rgb(237, 241, 209);
				}
			}
		}
		.answer-wrap {
			position: relative;
			box-shadow: 0upx 6upx 18upx rgba(66, 95, 152, 0.14);
			.answer-content {
				z-index: 1000;
				position: relative;
				flex-direction: column;
				width: 690upx;
				padding-top: 10upx;
				padding-bottom: 100upx;
				.answer {
					font-weight: bold;
					font-size: 34upx;
					color: rgb(50, 52, 55);
					// width: 100%;
					line-height: 50upx;
					padding: 20upx 30upx;
				}
				.desc {
					color: rgb(102, 120, 156);
					font-size: 26upx;
					margin-top: 20upx;
					line-height: 40upx;
					padding: 0 30upx 81upx;
				}
				.btn {
					position: absolute;
					bottom: 30upx;
					left: 30upx;
					background-color: rgb(50, 145, 249);
					border-radius: 6upx;
					width: 184upx;
					height: 60upx;
					align-items: center;
					justify-content: center;
					text {
						color: #fff;
						font-size: 26upx;
					}
				}
			}
			.bg {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
		.relative {
			margin-top: 40upx;
			flex-direction: column;
		}
		.bg-content {
			background-color: transparent;
			.title {
				color: #fff;
			}
			.item {
				background-color: #fff;
				color: #fff;
			}
			.one {
				position: absolute;
				bottom: 30upx;
				left: 40upx;
				width: 610upx;
				height: 30upx;
				background-color: rgba(255, 255, 255, 0.7);
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
			}
			.two {
				position: absolute;
				left: 80upx;
				bottom: 0;
				width: 530upx;
				height: 30upx;
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
				background-color: rgba(255, 255, 255, 0.4);
			}
		}
	}
}
.blue {
	color: rgb(50, 145, 249) !important;
}
</style>
